import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { FC, useEffect, useState } from "react"
import { Card, Avatar, Pagination, message } from 'antd';
import { knowledgeList } from "../../untils/api"
import style from "./index.module.scss"
import type { PaginationProps } from 'antd';
import ADrawer from "../../compent/Drawer"
// import { AForm } from "../../compent/AForm"

const { Meta } = Card;
const Knowledge: FC = () => {
    const [pageSizes, setPageSize] = useState(10)
    const [page, setPage] = useState(1)
    const [total, settotal] = useState(0)
    const [data, setData] = useState([])
    const [fromobj, setFeomObj] = useState<object>({})
    useEffect(() => {
        getList(page)
    }, [])
    const getList = (page: number, pageSize: number = pageSizes, Fromobj: object = fromobj) => {
        const params = {
            page,
            pageSize: pageSize,
            ...Fromobj
        }
        console.log(params)
        knowledgeList.getknowledgeList(params).then(res => {
            console.log(res.data.data[0])
            //列表
            setData(res.data.data[0])
            //总数据
            settotal(res.data.data[1])
        })
    }
    //分页
    const onChange: PaginationProps['onChange'] = (pageNumber, pageSize) => {
        console.log(pageNumber, pageSize);
        onchangPage(pageNumber, pageSize)
    };
    //分页
    const onchangPage = (pageNumber: number, pageSize: number) => {
        setPage(pageNumber)
        setPageSize(pageSize)
        getList(pageNumber)

    }
    const fn=(value:any)=>{
        console.log(value)
        knowledgeList.addKnow(value).then(res=>{
            console.log(res.data)
            if(res.data.statusCode===201){
                message.success("添加成功")
                getList(page)
            }
          })
    }
    return (
        <div >
            <Card>
                <ADrawer fn={fn}></ADrawer>
            </Card>
            <div className={`${style["a-table-know"]} box-pd `}>

                {data && data.map((item: any, index) => {
                    return <Card
                        style={{ width: 300 }}
                        cover={
                            <img
                                className={style["img"]}
                                alt="example"
                                src={item.cover}
                            />
                        }
                        actions={[
                            <SettingOutlined key="setting" />,
                            <EditOutlined key="edit" />,
                            <EllipsisOutlined key="ellipsis" />,
                        ]}
                    >
                        <Meta
                            title={item.title}
                            description={item.summary}
                        />
                    </Card>
                })}
            </div>
            <Pagination
                showSizeChanger
                // onShowSizeChange={onShowSizeChange}
                onChange={onChange}
                defaultCurrent={3}
                total={total}
            />

        </div>



    )
}

export default Knowledge

